
/**
 *  实现一个小型的Vue
 */

 class Vue {
     constructor(options = {}) {
         // 1. 保存选项的数据
         // 2. 负责把data注入到Vue实例
         this.$options = options || {}
         this.$data = options.data || {}
         const el = options.el
         this.$el = typeof el === 'string' ? document.querySelector(el) : el //  //el可以是类名，也可以是dom
         this._proxyData(this.$data)
         // 3. 负责调用Observer实现数据劫持
         new Observer(this.$data)
         // 4. 负责调用Compiler解析指令/插值表达式等
         new Compiler(this)

     }

     _proxyData (data) {
         //遍历data中的所有属性，并将其注入到Vue实例中去
         Object.keys(data).forEach(key => {
             Object.defineProperty(this, key, {
                 enumerable: true, //可枚举
                 configurable: true,  //可便利
                 get () {
                    return data[key]
                 },
                 set (newVal) {
                    if(data[key] === newVal) return
                    data[key] = newVal
                 }

             })
         })
     }
 }